<template>
  <div class="special_template" v-loading.fullscreen.lock="detLoading">
    <div class="special_img">
      <img class="special_temImg" :src="coverUrl(special.mobileBgImg)">
    </div>
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/member/back.png" />
      </div>
      <span class="commons_title">专题详情</span>
    </div>
    <div class="special_temMain">
      <div class="special_wrap">
        <div class="special_name">{{special.name}}</div>
        <div class="special_info">{{special.synopsis}}</div>
      </div>
      <div class="special_temList" v-if="mainList&&mainList.length>0" 
        v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <!-- 图书列表 -->
        <div class="special_book" v-for="item in mainList" :key="item.index" @click="toDetails('bookDet',item.resourceId)">
          <div class="special_temBookImg">
            <img :src="coverUrl(item.cover)" @error="errImg('book')" class="special_book_icon">
          </div>
          <div class="special_temListRight">
            <div class="special_temListName">{{item.resourceName}}</div>
            <div class="special_temListAuthor">{{item.author?item.author:'暂无'}}</div>
            <div class="special_rate">
              <el-rate v-model="item.score" disabled text-color="#FFE400" 
                :colors="starColor" style="float:left;marginRight:0.1rem;marginTop:0.03rem"></el-rate>
              <span class="score_text">{{item.resourceScore}}</span>
              <span class="rate_num">{{item.commentNum}}人评分</span>
            </div>
            <div class="special_temListSyno">{{item.synopsis}}</div>
          </div>
        </div>
        <p v-if="loading" class="page-infinite-loading">
          <span>
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </span> 
        </p>
        <p v-else class="loadOver">
          <span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
        </p>
      </div>
      <!-- <div class="special_no" v-else>
        <img class="no_con" src="@/assets/common/no_content.png">
        <div class="no_text">抱歉，目前暂无内容哦~</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { starColor } from '@/utils/static'
import { getSpecialDetails, specialRecommAPI } from '@/api/special.js'
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      starColor,
      special:{},
      selectId: null,
      navList: [],
      commList: [],
      mainList: [],
      swiperOption: { //可视区域个数
        slidesPerView: 'auto' //禁止反弹
      },
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        projectId: null
      },
      totalPage: null,
      loading: false,
      isNull: '',
      isLast: '',
      detLoading: false
    }
  },
  mounted() {
    this.listQuery.projectId = this.$route.query.id ? this.$route.query.id : null
    this.getDetails()
    this.getRecommList()
  },
  methods: {
    getDetails() { //详情
      this.detLoading = true
      getSpecialDetails(this.$route.query.id).then(res => {
        if(res.data.code === 0) {
          this.special = res.data.data
        } else {
          Toast(res.data.msg)
        }
        this.detLoading = false
      })
    },
    getRecommList() { //推荐图书
      specialRecommAPI(this.listQuery).then(res => {
        if(res.data.code === 0) {
          var list = []
          if(this.listQuery.pageNum == 1) { //第一页
            list = res.data.data.list
          } else {
            list = this.mainList.concat(res.data.data.list)
          }
          this.mainList = list
          this.totalPage = res.data.data.pages
          this.isNull = list && list.length > 0 ? false : true
          this.isLast = res.data.data.pages == this.listQuery.pageNum ? true : false
        } else {
          Toast(res.data.msg)
        }
      })
    },
    loadMore(){
      if(this.totalPage > this.listQuery.pageNum){
        this.listQuery.pageNum = this.listQuery.pageNum + 1
        this.getRecommList()
      }
    },
    toDetails(name,id) { //跳转至详情页
      this.navigationFuc(name, { id });
    },
  },
}
</script>

<style>
.special_template .el-rate__icon {
  margin-right: 0 !important;
}
.special_template .el-rate {
  line-height: 0 !important;
}
.mint-spinner-fading-circle{
  margin: 0 auto;
  margin-bottom: 10px;
}
.page-infinite-loading{
  text-align: center;
  padding: 10px;
  color: #999999;
  font-size: 14px;
}
.loadOver{
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  font-size: 14px;
}
</style>

<style scoped> 
.special_template {
  width: 100%;
  height: 100%;
  position: relative;
}
.special_template .commons_top {
  position: absolute;
  top: 0;
  left: 0;
}
.special_template .commons_title {
  color: #ffffff;
}
.special_img {
  width: 100%;
  height: 4.54rem;
}
.special_temImg {
  width: 100%;
  height: 100%;
}
.special_temMain {
  background: #ffffff;
  border-radius: 0.4rem 0.4rem 0 0;
  position: absolute;
  width: 100%;
  top: 4.11rem;
}
.special_wrap {
  padding: 0.6rem 0.4rem 0;
  box-sizing: border-box;
  margin-bottom: 0.2rem;
}
.special_name {
  color: #333333;
  font-size: 16px;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.special_info {
  color: #5D5F71;
  font-size: 14px;
  line-height: 0.42rem;
  font-weight: 500;
}
.special_book {
  display: flex;
  padding: 0.3rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #EEEEEE;
}
.special_book:last-child {
  border-bottom: none;
}
.special_temBookImg {
  width: 1.5rem;
  height: 2.1rem;
  margin-right: 0.33rem;
}
.special_book_icon {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.special_temListRight {
  flex: 1;
}
.special_temListName {
  color: #212020;
  font-size: 0.3rem;
  width: 5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.special_temListAuthor {
  color: #BDC2CB;
  font-size: 0.26rem;
  margin: 0.1rem 0;
}
.special_rate {
  overflow: hidden;
}
.score_text {
  color: #FD7068;
  font-weight: bold;
  font-size: 14px;
  float: left;
}
.rate_num {
  color: #5E5F71;
  font-size: 14px;
  font-weight: bold;
  margin-left: 0.16rem;
  float: left;
}
.special_temListSyno {
  width: 100%;
  margin-top: 0.1rem;
  color: #696969;
  font-size: 12px;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  display: -webkit-box;
}
.special_no {
  margin: 2rem auto;
  text-align: center;
}
.special_no .no_con {
  width: 2.83rem;
  height: 2.52rem;
}
.special_no .no_text {
  color: #999999;
  font-size: 16px;
  margin-top: 0.44rem;
}
</style>
<style>
  .swiper-slide{
    width: 0 !important;
  }
</style>